<template>
    <view class="clockInDay" :style=" { paddingTop: paddingHeight + 'px' } ">
        <nav-bar title="28天打卡"></nav-bar>
        <view class="container">
            <u-swiper indicator height="180rpx" indicatorMode="line" bgColor="transparent" keyName="image"
                @change=" e => current = e.current " :indicator=" false " :list=" swiperList " previousMargin="30"
                indicatorStyle="bottom: 0rpx;" nextMargin="30" circular imgMode="widthFix" @click=" clickSwiper ">
                <view slot="indicator" class="indicator">
                    <view class="indicator__dot" v-for="(item, index) in swiperList" :key=" index "
                        :class=" [index === current && 'indicator__dot--active'] ">
                    </view>
                </view>
            </u-swiper>
            <view class="clockIn-box">
                <view class="h-text">今天是您打卡的第 {{ clockInData.punchCardCount }} 天</view>
                <view class="bg-box">
                    <view class="p-box">
                        <view class="h-text2">还有 {{ clockInData.needPunchCardCount }} 天即可获得礼物</view>
                        <view class="h-text3">您本期已连续打卡 {{ clockInData.continuousDay }} 天~</view>
                        <view class="for-box">
                            <view class="for-item" v-for="(item, index) in clockInTypeList" :key=" index ">
                                <u--image :showLoading=" true " :src=" item.img " width="24rpx" height="24rpx"
                                    mode="widthFix" shape="circle"></u--image>
                                <text>{{ item.value }}</text>
                            </view>
                        </view>
                        <view class="week-box">
                            <view class="week-item" v-for="(item, index) in weekList"
                                :class=" { 'bg1': item.type == 0, 'bg2': item.type == 1 } "
                                @click="handleReissueCard(item)" :key=" index ">
                                <text>{{ item.value }}</text>
                                <u--image :showLoading=" true " :src=" item.img " width="48rpx" height="48rpx"
                                    mode="widthFix" shape="circle" v-if="item.type == 5"></u--image>
                                <u--image :showLoading=" true " :src=" item.img " width="36rpx" height="36rpx"
                                    mode="widthFix" shape="circle" v-else></u--image>
                            </view>
                        </view>
                    </view>
                    <view class="h-text4">
                        您有{{ clockInData.deficiencyPunchCardCount }}次缺卡记录，还有{{ clockInData.reissuePunchCardCount
                        }}次补卡机会，点击“-”图标可进行补卡
                    </view>
                </view>
            </view>
            <view class="daily-target">
                <view class="title">日目标</view>
                <view class="text">根据个人生活习惯完成清晨、早餐后、午餐后、晚餐后RER的测量。</view>
                <view class="measurement">
                    <view class="item">
                        <u--image :showLoading=" true " v-if="clockInData.tagLableOne"
                            src="http://oss.antaimedical.com/images/pro/2024/12/6760dfc2e4b0be9d444233ebA5zQWxKGv0vRbeba73790958d64dab39cd60ac5c911d.png"
                            width="48rpx" height="48rpx" mode="widthFix" shape="circle"></u--image>
                        <u--image :showLoading=" true " v-else
                            src="http://oss.antaimedical.com/images/pro/2024/12/6760dfa4e4b0be9d444233eaKMsFqzmPytLif0ea52dbc9ae87c24f5dd917d6fb8234.png"
                            width="48rpx" height="48rpx" mode="widthFix" shape="circle"></u--image>
                        <text>清晨</text>
                    </view>
                    <view class="item">
                        <u--image :showLoading=" true " v-if="clockInData.afterMeal"
                            src="http://oss.antaimedical.com/images/pro/2024/12/6760dfc2e4b0be9d444233ebA5zQWxKGv0vRbeba73790958d64dab39cd60ac5c911d.png"
                            width="48rpx" height="48rpx" mode="widthFix" shape="circle"></u--image>
                        <u--image :showLoading=" true " v-else
                            src="http://oss.antaimedical.com/images/pro/2024/12/6760dfa4e4b0be9d444233eaKMsFqzmPytLif0ea52dbc9ae87c24f5dd917d6fb8234.png"
                            width="48rpx" height="48rpx" mode="widthFix" shape="circle"></u--image>
                        <text>餐后</text>
                    </view>
                </view>
                <view class="go-btn" @click="navigate('/pagesA/health/device/info/index')">去测量</view>
            </view>
            <view class="step-card">
                <view class="title">今日步数</view>
                <view class="text">步行消耗量 <text class="step-text">{{ kcalNum }}</text><text
                        class="step-text2">kcal</text> </view>
                <view class="step-num">
                    <u--image :showLoading=" true "
                        src="http://oss.antaimedical.com/images/pro/2024/12/676112ade4b0be9d444233ecWyl0UqXWESE8dbd26700cb3eb990ed1e2d816c3b345e.png"
                        width="72rpx" height="104rpx" mode="widthFix" shape="circle"></u--image>
                    <view>{{ stepNum }}步</view>
                </view>
            </view>
            <view class="img-box" v-if="clockInData.punchCardCount != 28">
                <view class="day-num">{{ 28 - clockInData.punchCardCount }}</view>
                <u--image :showLoading=" true "
                    src="http://oss.antaimedical.com/images/pro/2024/12/67611356e4b0be9d444233eelorSdEQTwc396a8d077d229792202fd30d03f6f8d720.png"
                    width="100%" height="304rpx" shape="square" radius="16"></u--image>
            </view>
            <view class="img-box" v-else @click="navigate('/pagesB/clockInDay/analysis')">
                <u--image :showLoading=" true "
                    src="http://oss.antaimedical.com/images/pro/2024/12/67611344e4b0be9d444233edBlBGQlO5SoIAea4c78831fae64eb390a1be4860e9496.png"
                    width="100%" height="304rpx" shape="square" radius="16"></u--image>
            </view>
        </view>
        <u-popup :show=" questionPopup " @close="questionPopup = false" :round=" 30 " closeable>
            <view class="popup-content">
                <view class="title">温馨提示</view>
                <view class="con-box">
                    <u--image :showLoading=" true "
                        src="http://oss.antaimedical.com/images/pro/2024/12/67638ec5e4b0d615350f30ecPqK8qQeD64Cv221ca9e7fe47722b1a362ce0cb175a33.png"
                        width="504rpx" height="324rpx" shape="square" radius="16"></u--image>
                    <view class="text">
                        恭喜你！已完成7天打卡任务，
                        <br>
                        请尽快联系客服领取奖品
                    </view>

                </view>
                <view class="btn-box">
                    <view class="btn1" @click="questionPopup = false; showCode = true">联系客服</view>
                    <view class="btn2" @click="questionPopup = false">稍后联系</view>
                </view>
            </view>
        </u-popup>
        <u-overlay :show=" showCode " @click="showCode = false">
            <view class="warp">
                <view class="pop_main">
                    <u-image width="372rpx" height="372rpx"
                        src="http://oss.antaimedical.com/images/static/2024/08/66c85675e4b09217821c0fbaunKhEHRiPADT4703742019f8520d76a5056d89ecee6f.jpg"
                        :lazy-load=" true "></u-image>
                    <view class="code_tip">扫码获取客服企业微信</view>
                </view>
            </view>
        </u-overlay>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
const dayjs = require('@/utils/dayjs.min.js');
import {
    getPunchCardDetail,
    getDecodeData,
    reissueCard,
} from '@/api/index.js'
import circularProgress from '@/components/circularProgress/circularProgress.vue'
export default {
    components: {
        circularProgress,
    },
    data () {
        return {
            paddingHeight: uni.getStorageSync('navbarHeight'),
            userId: uni.getStorageSync('userId'),
            current: 0,
            questionPopup: false,
            showCode: false,
            swiperList: [
                'http://oss.antaimedical.com/images/pro/2024/12/67611691e4b0be9d444233f08YDlt3eu8YY82ebb31b4c22dd11273015d2e60cf3f64.png',
                'http://oss.antaimedical.com/images/pro/2024/12/67611664e4b0d615350f30df2qqPm50ym4wPdc95a728234bc06d70d54c474ec5428b.png',
                'http://oss.antaimedical.com/images/pro/2024/12/67611687e4b0be9d444233efxXB0lewB1I6Lde191d51e51cf0b9012352c111da8d0c.png',
            ],
            clockInTypeList: [
                {
                    value: '当天',
                    img: 'http://oss.antaimedical.com/images/pro/2024/12/6760dfcbe4b0d615350f30dbMA1Dh8a5yoTi1c9a6b9cf572ef3b31c686244bdb3b85.png',
                },
                {
                    value: '已打卡',
                    img: 'http://oss.antaimedical.com/images/pro/2024/12/6760dfc2e4b0be9d444233ebA5zQWxKGv0vRbeba73790958d64dab39cd60ac5c911d.png',
                },
                {
                    value: '缺卡',
                    img: 'http://oss.antaimedical.com/images/pro/2024/12/6760dfa4e4b0be9d444233eaKMsFqzmPytLif0ea52dbc9ae87c24f5dd917d6fb8234.png',
                },
                {
                    value: '未打卡',
                    img: 'http://oss.antaimedical.com/images/pro/2024/12/6760dfd8e4b0d615350f30dcMpFT4fRJ31887d7c593f455df6fd5976a5f77e122958.png',
                },
            ],
            weekList: [
                { value: '12/12', },
                { value: '12/13', },
                { value: '12/14', },
                { value: '12/15', },
                { value: '12/16', },
                { value: '12/17', },
                { value: '12/18', },
            ],
            clockInData: {
                punchCardCount: 0,
                needPunchCardCount: 0,
            },
            continuous_day: 0,
            stepNum: 0,
            kcalNum: 0,
            dayType: {
                // 0:缺卡,1:已打卡,2:日期未到,3:当日已经打卡,4:当日未打卡,5:最后一天
                '0': 'http://oss.antaimedical.com/images/pro/2024/12/6760dfa4e4b0be9d444233eaKMsFqzmPytLif0ea52dbc9ae87c24f5dd917d6fb8234.png',
                '1': 'http://oss.antaimedical.com/images/pro/2024/12/6760dfc2e4b0be9d444233ebA5zQWxKGv0vRbeba73790958d64dab39cd60ac5c911d.png',
                '2': 'http://oss.antaimedical.com/images/pro/2024/12/6760dfd8e4b0d615350f30dcMpFT4fRJ31887d7c593f455df6fd5976a5f77e122958.png',
                '3': 'http://oss.antaimedical.com/images/pro/2024/12/6760dfcbe4b0d615350f30dbMA1Dh8a5yoTi1c9a6b9cf572ef3b31c686244bdb3b85.png',
                '4': 'http://oss.antaimedical.com/images/pro/2024/12/6760dfd8e4b0d615350f30dcMpFT4fRJ31887d7c593f455df6fd5976a5f77e122958.png',
                '5': 'http://oss.antaimedical.com/images/pro/2024/12/6760dfe3e4b0d615350f30ddjqvzMT4db7oaa860878ce269fabd335bb79cd722e795.png',
            }
        }
    },
    computed: {
        ...mapGetters({
            userInfo: 'getUserInfo'
        }),
    },
    mounted () {
        this.getWeRunData()
        this.getPunchCardDetail()
    },
    methods: {
        // 获取打卡详情
        getPunchCardDetail () {
            getPunchCardDetail({ userId: this.userInfo.userId }).then((res) => {
                const { data } = res
                this.clockInData = data
                if (data.pageType == 1) {
                    this.questionPopup = true
                }
                this.weekList = this.weekList.map((val, index) => {
                    return {
                        value: dayjs(data['day' + (index + 1)]).format('MM/DD'),
                        date: data['day' + (index + 1)],
                        type: data['day' + (index + 1) + 'Val'],
                        img: this.dayType[data['day' + (index + 1) + 'Val']]
                    }
                })
            })
        },
        // 补卡
        handleReissueCard (item) {
            if (item.type == 0) {
                if (!this.clockInData.reissuePunchCardCount) {
                    return uni.showModal({
                        title: '补卡失败',
                        content: `您本期补卡次数已用完，下期再接再厉哦`,
                        confirmColor: '#545DDE',
                        showCancel: false,
                        success (modal) {

                        }
                    })
                }
                let params = {
                    needPunchCardCount: this.clockInData.needPunchCardCount,
                    reissueDate: item.date,
                    userId: this.userInfo.userId,
                }
                reissueCard(params).then((res) => {
                    this.getPunchCardDetail()
                    uni.showModal({
                        title: '补卡成功！',
                        content: `距离本期奖品还有${this.clockInData.needPunchCardCount - 1}天打卡，再接再厉哦`,
                        confirmColor: '#545DDE',
                        showCancel: false,
                        success (modal) {

                        }
                    })
                })
            }
        },
        // 获取微信运动步数
        getWeRunData () {
            let that = this
            wx.login({
                timeout: 10000,
                success: async res => {
                    wx.getWeRunData({
                        success (res2) {
                            let params = {
                                code: res.code,
                                encryptedData: res2.encryptedData,
                                iv: res2.iv,
                            }
                            getDecodeData(params).then((result) => {
                                let runData = JSON.parse(result.data)
                                that.stepNum = runData.stepInfoList[runData.stepInfoList.length - 1].step
                                that.kcalNum = (that.stepNum * 28 / 1000).toFixed(1)
                            }).catch((err) => {

                            })
                        }
                    })

                }
            })
        },
        navigate (url) {
            uni.navigateTo({
                url
            })
        },
        clickSwiper (index) {
            switch (index) {
                case 0:
                    uni.switchTab({
                        url: '/pages/explore/index'
                    })
                    break;
                case 1:
                    uni.navigateTo({
                        url: `/pagesB/knowledge/article?id=50`
                    })
                    break;
                case 2:
                    uni.navigateTo({
                        url: `/pagesB/knowledge/article?id=51`
                    })
                    break;
            }
            // uni.navigateTo({
            //     url: `/pagesB/knowledge/article?id=${obj.id}`
            // })
        },
    }
}
</script>
<style lang="scss" scoped>
.clockInDay {
    background: linear-gradient(351deg, #F5F6FA 0%, #C3C9FF 100%);
    min-height: 100vh;
}

.container {
    padding: 48rpx;
    width: 100%;
}

.clockIn-box {
    margin-top: 32rpx;
    background: url(' http://oss.antaimedical.com/images/pro/2024/12/6760d924e4b0be9d444233e9vbpmbtQ4zOBxe64f1ce92602377a49152caa0772006f.png') no-repeat;
    background-size: 100% 100%;
    height: 530rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .h-text {
        height: 90rpx;
        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        text-align: center;
        padding-top: 40rpx;
        padding-left: 50rpx;
    }

    .bg-box {
        width: 100%;
        height: 424rpx;
        margin-bottom: 6rpx;
        background: linear-gradient(360deg, #FFFFFF 80%, #FFFFD7 100%), #FAFAFA;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .p-box {
            width: 100%;
            padding: 0 32rpx;
            margin-top: 32rpx;

            .h-text2 {
                text-align: left;
                font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
                font-weight: bold;
                font-size: 32rpx;
                color: #333333;
            }

            .h-text3 {
                text-align: left;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #4B4B4B;
                padding: 16rpx 0;
            }

            .bg1 {
                background: #F4F4F4;
            }

            .bg2 {
                background: #EAECFF;
            }

            .for-box {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .for-item {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-right: 48rpx;

                    &:last-child {
                        margin-right: 0;
                    }

                    text {
                        margin-left: 6rpx;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #333333;
                    }
                }
            }

            .week-box {
                display: flex;
                justify-content: space-around;
                align-items: center;
                padding: 48rpx 0;

                .week-item {
                    width: 80rpx;
                    height: 100rpx;
                    border-radius: 24rpx 24rpx 24rpx 24rpx;
                    border: 2rpx solid #EAECFF;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #999999;
                    padding: 8rpx 0;
                }
            }

        }

        .h-text4 {
            width: 100%;
            height: 52rpx;
            padding: 0 36rpx;
            background: #F4F4F4;
            border-radius: 0rpx 0rpx 32rpx 32rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #4B4B4B;
            line-height: 23rpx;
            text-align: left;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
    }
}

.daily-target {
    margin-top: 32rpx;
    padding: 32rpx;
    background: #FFFFFF;
    border-radius: 32rpx 32rpx 32rpx 32rpx;

    .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        text-align: left;
    }

    .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        text-align: left;
        margin-top: 8rpx;
    }

    .measurement {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24rpx 0;

        .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-right: 88rpx;

            &:last-child {
                margin-right: 0;
            }

            text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 20rpx;
                color: #333333;
                text-align: left;
                margin-top: 6rpx;
            }
        }
    }

    .go-btn {
        width: 100%;
        height: 72rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(135deg, #839BFC 0%, #545DDE 100%);
        border-radius: 198rpx 198rpx 198rpx 198rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFFFFF;
    }
}

.step-card {
    margin-top: 32rpx;
    padding: 32rpx;
    background: #FFFFFF;
    border-radius: 32rpx 32rpx 32rpx 32rpx;

    .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        text-align: left;
    }

    .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        text-align: left;
        margin-top: 8rpx;
        padding: 24rpx 0;
    }

    .step-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #333333;
        margin-left: 24rpx;
    }

    .step-text2 {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
    }

    .step-num {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #666666;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #666666;
    }
}

.img-box {
    position: relative;
    margin-top: 32rpx;

    .day-num {
        position: absolute;
        top: 120rpx;
        left: 160rpx;
        font-family: LogoSC Unbounded Sans, LogoSC Unbounded Sans;
        font-weight: bold;
        font-size: 56rpx;
        color: #FF78F0;
        z-index: 2;
    }
}

.indicator {
    display: flex;
    align-items: center;
    justify-content: center;

    &__dot {
        width: 32rpx;
        height: 8rpx;
        border-radius: 100px;
        background-color: rgba(255, 255, 255, 0.35);
        margin: 0 5px;
        transition: background-color 0.3s;

        &--active {
            background-color: #ffffff;
        }
    }
}

.popup-content {
    padding: 32rpx;

    .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #000000;
    }

    .con-box {
        margin-top: 48rpx;
        min-height: 320rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .text {
            width: 100%;
            height: 232rpx;
            background: #F2F3FD;
            border-radius: 32rpx 32rpx 32rpx 32rpx;
            padding-top: 96rpx;
            margin-top: -70rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
        }
    }

    .btn-box {
        margin-top: 48rpx;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .btn1 {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #545DDE;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 22rpx 88rpx;
            border-radius: 32rpx 32rpx 32rpx 32rpx;
            border: 4rpx solid #545DDE;
        }

        .btn2 {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 22rpx 88rpx;
            background: #545DDE;
            border-radius: 32rpx 32rpx 32rpx 32rpx;
        }
    }

}

.pop_main {
    height: 850rpx;
    background-image: url('http://oss.antaimedical.com/images/static/2024/08/66b2dfb8e4b000d2c606b522RXGvW8zGTU2obf9df7c2156d0b89a16df0e7d2dd7f56.png');
    padding: 296rpx 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    .code_tip {
        padding-top: 32rpx;
        font-size: 32rpx;
        color: #666666;
    }
}
</style>
